<template>
  <div class="home">
    <el-container>
      <!-- 头部 -->
      <el-header class="header">
        <div class="a">
          <div>
            <img src="../assets/111.jpg" alt="" />
            <span>后台管理耶</span>
          </div>
          <div>
            <el-button type="" @click="exit">退出</el-button>
          </div>
        </div>
      </el-header>
      <!-- 主体 -->
      <el-container>
        <!-- 左边栏 -->
        <el-aside :width="isCollapse ? '65px' : '150px'">
          <div class="aaa" @click="isCollapse = !isCollapse">
            <img src="../assets/a-aixinxihuanxiaishoucang.png" alt="" />
          </div>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#333333"
            text-color="#fff"
            active-text-color="#fff"
            :collapse="isCollapse"
            :unique-opened="true"
            :router="true"
            :collapse-transition="true"
          >
            <el-submenu
              :index="item.id + ''"
              v-for="item in menus"
              :key="item.id"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span class="name">{{ item.authName }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="item2.path"
                  v-for="item2 in item.children"
                  :key="item2.id"
                >
                  {{ item2.authName }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右边内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import { getUserApi } from "../../http/api";
// import { userApi } from "@/http/api";

export default {
  data() {
    return {
      menus: [], //用户数据
      isCollapse: false,
    };
  },
  created() {
    this.getuser();
  },
  methods: {
    async getuser() {
      const res = await this.$API.getUserApi();
      console.log(res);
      this.menus = res;
    },
    // 退出
    exit() {
      sessionStorage.removeItem("token");
      this.$router.push("login");
    },
  },
  components: {},
};
</script>

<style lang='scss'>
.el-header,
.el-footer {
  background-color: #333333;
  color: #43648a;
  text-align: center;
  line-height: 60px;
}
.header {
  .a {
    display: flex;
    justify-content: space-between;
  }
  img {
    width: 50px;
    height: 50px;
    vertical-align: middle;
    border-radius: 70%;
    margin-right: 20px;
  }
  span {
    font-weight: 700;
    font-size: 21px;
  }
  .el-button {
    text-align: right;
    background-color: white;
  }
}
.name {
  margin: 0 10px;
}
.aaa {
  // margin: 10px 60px;
  text-align: center;
  img {
    width: 15px;
    height: 15px;
    cursor: pointer;
    text-align: center;
    padding-bottom: 5px;
  }
}
.el-aside {
  background-color: #333333;
  color: #333;
  // text-align: center;
  // line-height: 200px;
}
div.el-submenu__title {
  margin: 0 !important;
  padding: 0 !important;
}
.el-main {
  background-color: white;
  color: #333;
  // text-align: center;
  // line-height: 160px;
}
.el-container {
  min-height: 579px;
  // line-height: 0;
}
.el-menu-item-group__title {
  padding: 0 !important;
}
</style>
